<template>
<div class="product">
  <!-- 横向排列 -->
  <ul >
    <li v-for="(item,index) in arr2" :key="index">
        <img :src="item.imgURL" />
        <span>{{item.title}}</span>
        <span class="sp">访问量:{{item.visits}}</span>
    </li>
       
  </ul>

  <!-- 选项卡 -->
  <div class="cursor"> 
     <!-- 按钮区域 -->
     <div class="btnlist">
        <button class="active" @click="sale()">畅销榜</button>
        <button @click="hot()">热量榜</button>
        <button @click="visits()">流量榜</button>

     </div>

     <!-- 展示区 -->
     <table border="1" cellpadding="0" cellspacing="0" v-show="x==1" >
        <tr>
            <th>图片</th>
            <th>id</th>
            <th>标题</th>
            <th>上架时间</th>
            <th>销售量</th>
        </tr>
        <tbody v-for="(item,index) in arr1" :key="index">
            <tr>
                <td><img :src="index" /></td>
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{`${new Date(item.createTime).getFullYear()}/${('0'+(new Date(item.createTime).getMonth()+1)).slice(-2)}/${('0'+(new Date(item.createTime).getDate())).slice(-2)}/${('0'+(new Date(item.createTime).getHours())).slice(-2)}:${ ('0'+(new Date(item.createTime).getMinutes())).slice(-2)}:${('0'+(new Date(item.createTime).getSeconds())).slice(-2)}`
    }}</td>
                <td>{{item.sale}}</td>
            </tr>

       
      </tbody>
     </table>

      <table border="1" cellpadding="0" cellspacing="0" v-show="y==1" >
        <tr>
            <th>图片</th>
            <th>id</th>
            <th>标题</th>
            <th>上架时间</th>
            <th>热量</th>
        </tr>
        <tbody v-for="(item,index) in arr3" :key="index">
            <tr>
                <td><img :src="item.imgURL" /></td>
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{`${new Date(item.createTime).getFullYear()}/${('0'+(new Date(item.createTime).getMonth()+1)).slice(-2)}/${('0'+(new Date(item.createTime).getDate())).slice(-2)}/${('0'+(new Date(item.createTime).getHours())).slice(-2)}:${ ('0'+(new Date(item.createTime).getMinutes())).slice(-2)}:${('0'+(new Date(item.createTime).getSeconds())).slice(-2)}`
    }}</td>
                <td>{{item.hot}}</td>
            </tr>
      </tbody>
     </table>
  </div>
  </div>
</template>

<script>
import index from "../assets/JS/index.js";

export default {
 name:'ProductList',
 data(){
    return{
        arr1:[],
        arr2:[],
        arr3:[],
        x:0,
        y:0,
        index,
       
    }
 },
 methods:{
    sale(){
        
        let arr=[]
         this.index.forEach(item=>{
            if(item.grounding){
                 arr.push(item)
            }
        
        })
         arr.sort(function(str1,str2){
         return str2.sale - str1.sale ;  
        })
    this.arr1=arr.splice(0,10)
    this.x=1;
    this.y=0;
    },
    hot(){
       

    let arr=[]
         this.index.forEach(item=>{
            if(item.grounding){
                 arr.push(item)
            }
        
        })
         arr.sort(function(str1,str2){
         return str2.hot - str1.hot ;  
        })
     this.arr3=arr.splice(0,10)
     this.x=0;
     this.y=1;
    },
    visits(){
        let arr=[]
         this.index.forEach(item=>{
            if(item.grounding){
                 arr.push(item)
            }
        
        })
         arr.sort(function(str1,str2){
         return str2.visits - str1.visits ;  
        })
     this.arr2=arr.splice(0,5)
    }
 },

 }

</script>

<style scoped>
.product{
    width: 100%;
    height: 100%;
}
.product .sp{
    position: absolute;
    left: 85px;
    top: 10px;
}
.product ul{
    width: 95%;
    height: 270px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product ul li{
    width: 19%;
    height: 100%;
    background-color: rgba(254, 154, 54, 0.7);
    text-align: center;
    position: relative;
}
.product ul li img{
    width: 90%;
    height: 75%;
    margin-top: 20px;
}
.product ul li span{
    display: block;
    width: 100%;
    margin-top: 8px;
}
.product .cursor{
    width: 95%;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(254, 154, 54, 0.7);
}
.product .cursor .btnlist{
    width: 100%;
    overflow: hidden;
    border-bottom: 2px dotted white;
}
.product .cursor .btnlist button{
    border: none;
    background-color: rgba(254, 154, 54, 0.7);
    border: 1px solid rgba(254, 154, 54);
    color: white;
    width: 200px;
    height: 50px;
}
.product .cursor .btnlist button.active{
    background-color: white;
    color: orange;
    border:  1px solid gold;
}
.product .cursor table{
    width: 100%;
    height: 100%;
    text-align: center;
}
.product .cursor table img{
 width: 100px;
 height: 80px;
}

</style>